<template>
  <div class="layout-all">
    <el-row>
    <el-col :xs="24" :sm="12" :lg="8">
        <div class="menu_title" >编辑菜单：</div>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="form-width-80">
          <el-form-item label="标题:" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="跳转地址:" prop="path">
            <el-input v-model="form.path" placeholder="" />
          </el-form-item>

          <el-form-item label="标题图标:" prop="thumb">
            <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100" cate_id="1"/>
          </el-form-item>
          <el-form-item label="标题分区:" prop="cat_id">
            <el-select v-model="form.cat_id" placeholder="请选择分区">
                  <el-option
                    v-for="item in cateData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    >
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="标题颜色" prop="textColor">
            <el-color-picker v-model="form.textColor"></el-color-picker>
          </el-form-item>
          <el-form-item label="角标字段key:" prop="subscript">
            <el-input
              v-model="form.subscript"
              placeholder="请输入角标字段key"
            />
          </el-form-item>

          <el-form-item label="是否启用:" prop="status">
            <el-switch v-model="form.status" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-close" circle @click="bk()" />
            <el-button
              type="success"
              icon="el-icon-check"
              circle
              @click="onSubmit('form')"
            />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="16">
        <url-address @selectMenu="selectMenu" @selectActivity="selectActivity"></url-address>
      </el-col>
    </el-row>
      
  </div>
</template>

<script>
import urlAddress from '@/components/url_address/urlAddress'
export default {
  components: { urlAddress },
  data() {
    return {
      upload_thumburl: "",
       thumb:"",
      cateData:[],
      id:0,
      form: {
        cat_id:'',
        id: 0,
        title: "",
        thumb:"",
        textColor:'',
        status:true,
        path:''
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        // path: [{ required: true, message: "请输入跳转地址", trigger: "blur" }],
        // thumb: [{ required: true, message: "请上传图标", trigger: "blur" }],
        // textColor: [{ required: true, message: "请选择标题颜色", trigger: "blur" }],
        cat_id: [{ required: true, message: "请选择标题分区", trigger: "blur" }],

      },
    };
  },
  methods: {
    init (id) {
      if (id) {
        this.id = id;
      }
      this.init_into();
    },
    selectMenu (item) {
       
      // item.status === 1
      //   ? (this.form.status = true)
      //   : (this.form.status = false);
      //   this.thumb = item.thumb;
      //   this.form.title = item.title
        this.form.path = item.path
        // this.form.textColor = item.textColor
    },
    selectActivity (url) {
      this.form.path = url
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          this.get("/admin/UserCenter/save", form, "POST").then((e) => {
            this.$msg_ok("success", "操作成功");
            this.$emit('closeAddMenu');
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$emit('closeAddMenu',1);
    },
    
    // 获取当前数据
    init_into() {
      this.get("/admin/UserCenter/info", {'id':this.id}, "POST").then((e) => {
          this.cateData = e.cate
          if(this.id>0){
            this.form = e.info.tpl;
            this.form.cat_id =this.form.cat_id== 0?'':this.form.cat_id
            this.form.status =this.form.status == 1
          }
      });
    },
  },
};
</script>

<style scoped>
.layout-all {
  margin: 10px;
}
.spces_div {
  border: 1px solid #dcdfe6;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.avatar {
  width:100%;
  height:100%;
}

.menu_title {
  font-size:20px;font-weight:bold;
  padding:10px 0px;
}
</style>
